<template>
    <div class="index">
        <div class="common-layout">
            <el-container>
                <el-aside width="260px">
                    <MyMenu></MyMenu>
                </el-aside>
                <el-container>
                    <el-header style="padding: 0;">
                        <MyHeader></MyHeader>
                    </el-header>
                    <el-main style="padding-top: 0;padding-bottom: 0;">
                        <router-view v-slot="{ Component }" :key="key">
                            <keep-alive>
                                <component :is="Component" />
                            </keep-alive>
                        </router-view>
                    </el-main>
                    <keep-alive>
                        <PlayBar></PlayBar>
                    </keep-alive>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup>
import MyMenu from '@/components/layouts/menu.vue'
import MyHeader from '@/components/layouts/header.vue'
import PlayBar from '@/views/playbar/index.vue'
//引入计算属性
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const $route = useRoute()
const key = computed(() => $route.name ? $route.name + +new Date() : $route + +new Date())
</script>

<style lang="less" scoped></style>